<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <!--固定引用结束,自定义引用添加在下面-->
    <title>JT2</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>
        html, body {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .notice-alert-total {
            opacity: 1;
        }

        .notice-alert-alert {
            opacity: 1;
            width: 6.38rem;
            /*height: 6.72rem;*/
            background: rgba(255, 255, 255, 1);
            border-radius: 0.16rem;
        }

        .notice-alert-title {
            margin-top: 0.56rem;
            margin-left: 0.44rem;
            margin-right: 0.44rem;
            color: rgba(34, 34, 34, 1);
            line-height: 0.56rem;
        }

        .notice-alert-part {
            margin-top: 0.32rem;
            margin-left: 0.44rem;
            margin-right: 0.44rem;
        }

        .notice-alert-part1 {
            margin-left: 0.44rem;
            margin-right: 0.44rem;
        }

        .notice-alert-alertWord {
            width: 6.38rem;
            max-height: 5.72rem;
            padding-bottom: 0.12rem;
        }

        .notice-alert-alertButtonWord {
            color: rgba(44, 104, 255, 1);
            line-height: 0.44rem;
        }

        .notice-alert-alertButton {
            width: 6.38rem;
            height: 1rem;
            margin-top: 0.12rem;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -1px 0px 0px rgba(228, 228, 228, 1);
            border-radius: 0px 0px 8px 8px;
        }

        .notice-alert-content {
            margin-top: 0.32rem;
        }

        .notice-alert-img img {
            width: 6.38rem;
            height: 3.4rem;
            border-top-right-radius: 0.16rem;
            border-top-left-radius: 0.16rem;
        }

        .notice-alert-imgTitle {
            color: rgba(34, 34, 34, 1);
            line-height: 0.52rem;
            margin-top: 0.38rem;
        }

        .notice-alert-imgContent {
            margin-top: 0.16rem;
        }

        .notice-alert-imgBottom {
            margin-left: 0.44rem;
            margin-right: 0.44rem;
        }

        .notice-alert-imgButton {
            background: rgba(78, 126, 244, 1);
            border-radius: 0.42rem;
            margin-top: 0.46rem;
            margin-left: 0.88rem;
            margin-right: 0.88rem;
            width: 4.62rem;
            height: 0.84rem;
            margin-bottom: 0.48rem;
        }

        .notice-alert-imgButtonWord {
            color: rgba(255, 255, 255, 1);
            line-height: 0.42rem;
        }

        .notice-alert-imgPart {
            margin-top: 0.32rem;
        }

        .notice-alert-imgContent {
            max-height: 2.72rem;
        }

        .notice-alert-imgPart1 {
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.4rem;
        }

        .notice-alert-imgPart {
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.4rem;
        }

        .notice-alert-part1 {
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.4rem;
        }

        .notice-alert-part {
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.4rem;
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body class="notice-alert-total">
<div class="notice-alert-total flex-column h-100-p justify-content-center align-items-center">
    <div class="notice-alert-alert flex-column">
    </div>
</div>

</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pm = {
    sysNotice: {
      title: '相应的标题文案',
      msgConnect: ''
    },
    noticeId: '',
    alertUrl: ''
  }

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //getAlertSysNotice('1')
    getAlertSysNotice(params.noticePosition)
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    getAlertSysNotice(pm.noticeId)
  }

  //关闭公告弹窗
  function closeAlert() {
    jsBridge.closeNoticeAlert()
  }

  //后台查询公告详情，写入前端
  function selectSysNoticeById(noticeId) {
    let htmlStr = ''
    Server.noticeAlert.selectSysNoticeById({noticeId: noticeId}).then(
      function (data) {
        //公告中有图片展示
        if (data.sysNotice.imgUrl) {
          htmlStr += `
                                <div class="notice-alert-img"><img src=${data.sysNotice.imgUrl} onclick="goAlertUrl()"></div>
                                <div class="notice-alert-imgBottom flex-column" onclick="goAlertUrl()">
                                <div class="notice-alert-imgTitle fs18 ff500" style="text-align: center">${data.sysNotice.title}</div>
                                <div class="notice-alert-imgContent" style="overflow:scroll;">`
          paragraph = data.sysNotice.msgConnect.split('\n')
          paragraph.forEach(
            function (item, index) {
              if (index === 0) {
                htmlStr += `<div class="notice-alert-imgPart1 fs14 ff400">${item}</div>`
              } else {
                htmlStr += `<div class="notice-alert-imgPart fs14 ff400">${item}</div>`
              }
            }
          )
          htmlStr += `
                                </div>
                                </div>
                                <div class="notice-alert-imgButton flex-row justify-content-center align-items-center" onclick="closeAlert()">
                                <div class="notice-alert-imgButtonWord fs15 ff400">我知道了</div>
                                </div>`
        }
        //公告中无图片展示
        else {
          htmlStr += `
                        <div class="notice-alert-alertWord flex-column" onclick="goAlertUrl()">
                            <div>
                            <div class="flex-row">
                                <div class="notice-alert-title fs18 ff500" style="text-align: center">${data.sysNotice.title}</div>
                            </div>
                            </div>
                            <div class="notice-alert-content" style="overflow:scroll;">`
          paragraph = data.sysNotice.msgConnect.split('\n')
          paragraph.forEach(
            function (item, index) {
              if (index === 0) {
                htmlStr += `<div class="notice-alert-part1 fs14 ff400">${item}</div>`
              } else {
                htmlStr += `<div class="notice-alert-part fs14 ff400">${item}</div>`
              }
            }
          )
          htmlStr += `</div>
                        </div>
                        <div class="notice-alert-alertButton flex-row align-items-center justify-content-center" onclick="closeAlert()">
                            <div class="notice-alert-alertButtonWord fs16 ff500">我知道了</div>
                        </div>`
        }
        $('.notice-alert-alert').html(htmlStr)
        //含有链接
        if (data.sysNotice.linkUrl) {
          pm.alertUrl = data.sysNotice.linkUrl
        }
      }
    )
  }

  //公告弹窗中的链接跳转
  function goAlertUrl() {
    if (pm.alertUrl) {
      jsBridge.openWindow(pm.alertUrl)
    }
  }

  //获取需要弹窗的公告id
  function getAlertSysNotice(noticePosition) {
    Server.noticeAlert.getAlertSysNotice({noticePosition: noticePosition}).then(
      function (data) {
        if (data.sysNotice) {
          pm.noticeId = data.sysNotice.noticeId
          //将公告填入弹窗
          selectSysNoticeById(pm.noticeId)
        }
      }
    )
  }

</script>
</html>